import classNames from 'classnames'
import type { FC } from 'react'
import styles from './styles.module.scss'

interface IndexProps {
  isHidden?: boolean
  onChange?: (isHidden: boolean) => void
  style?: React.CSSProperties
}

const Index: FC<IndexProps> = ({ isHidden, onChange, style }) => {
  return (
    <div className={classNames(styles.operBtnwarper, { [styles.disabled]: isHidden })} style={style} >
      {
        isHidden
          ? <svg onClick={() => {
            onChange?.(false)
          }} style={{ fontSize: '20px', width: '22px' }} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" ><path stroke="currentColor" strokeLinecap="round" fill='none' strokeLinejoin="round" strokeWidth="1.5" d="M9.76 14.367a3.123 3.123 0 01-.924-2.23A3.16 3.16 0 0112 8.973c.867 0 1.665.35 2.23.925M15.105 12.699a3.158 3.158 0 01-2.537 2.542"></path><path stroke="currentColor" fill='none' strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M6.655 17.472c-1.587-1.246-2.931-3.066-3.905-5.335.984-2.279 2.337-4.109 3.934-5.365C8.271 5.516 10.102 4.834 12 4.834c1.909 0 3.739.692 5.336 1.957M19.449 8.99a15.358 15.358 0 011.802 3.147c-1.967 4.557-5.443 7.302-9.25 7.302-.863 0-1.714-.14-2.532-.413M19.887 4.25L4.113 20.023"></path></svg>
          : <svg onClick={() => {
            onChange?.(true)
          }} style={{ fontSize: '20px', width: '22px' }}xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" ><path stroke="currentColor" fill='none' strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M15.16 12.053a3.162 3.162 0 11-6.322-.001 3.162 3.162 0 016.323.001z" clipRule="evenodd"></path><path fillRule="evenodd" stroke="currentColor" fill='none' strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M11.998 19.355c3.808 0 7.291-2.738 9.252-7.302-1.961-4.564-5.444-7.302-9.252-7.302h.004c-3.808 0-7.291 2.738-9.252 7.302 1.961 4.564 5.444 7.302 9.252 7.302h-.004z" clipRule="evenodd"></path></svg>
      }
    </div>
  )
}

export default Index
